<template>
  <view>
    <view class="msgs">
      <view class="msg" v-for="i in msgs" :key="i.id" @click="$goto(i.url)">
        <view class="avatar">
          <u-badge type="error" count="7" size="mini" is-center></u-badge>
          <u-avatar :src="i.pic" size="54" mode="square"></u-avatar>
        </view>
        
        <view class="info">
          <view class="title">
            <text>{{i.title}}</text>
            <image class="gf" src="../../static/icons/gf.png" mode="heightFix" v-if="i.isgf"></image>
          </view>
          <view class="sub text-cut">您已成功开通会员,并获得60元代金券已放入您的“我的-代您已成功开通会员,并获得60元代金券已放入您的“我的-代您已成功开通会员,并获得60元代金券已放入您的“我的-代</view>
        </view>
        
        <view class="date">昨天18:57</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msgs: [
          {
            id: 1,
            title: '客服',
            pic: '/static/icons/kefu.png',
            isgf: true,
            url: ''
          },
          {
            id: 2,
            title: '活动消息',
            pic: '/static/icons/huodong.png',
            isgf: true,
            url: '/pages/msg/activity'
          },
          {
            id: 3,
            title: '系统消息',
            pic: '/static/icons/xitong.png',
            isgf: true,
            url: '/pages/msg/system'
          },
          {
            id: 4,
            title: '立刻就士大夫',
            pic: 'https://picsum.photos/id/268/200/200',
            isgf: false,
            url: ''
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
  .msg {
    background: #fff;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    
    &::after {
      content: '';
      width: 630rpx;
      height: 2rpx;
      background: #EFEFEF;
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translateX(-24rpx);
    }
    
    .avatar {
      position: relative;
    }
    
    .info {
      width: 500rpx;
      
      .title {
        color: #000000;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
      
      .gf {
        width: auto;
        height: 28rpx;
        margin-left: 8rpx;
      }
      
      .sub {
        color: #999999;
        font-size: 20rpx;
      }
    }
    
    .date {
      color: #CDCDCD;
      font-size: 18rpx;
      transform: translateY(-120%);
    }
  }
</style>